import React, { SyntheticEvent, useState } from "react";
import { Button, Col, Container, Form, FormCheck, FormGroup, FormLabel, InputGroup, Row } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import "./index.css";
import ChatService from "../../../../services/chatservice";
import { PopupDialog } from "../../../../components/common";
import { toast } from "react-toastify";
import utils from "../../../../utils";
import { UserHelper } from "../../../../helper";

const AddOrEditChatGroup = ()=> {

    const navigate = useNavigate();
    
    const [groupName,setGroupName] = useState("");
    const [groupDesc,setGroupDesc] = useState("");
    const [groupTag,setGroupTag] = useState("");
    const [maxCount,setMaxCount] = useState();
    const [isPublic,setIsPublic] = useState(true)

    const onChangeGroupName = (e:any)=> {
        setGroupName(e.currentTarget.value);
    }
    const onChangeGroupDesc = (e:any)=> {
        setGroupDesc(e.currentTarget.value);
    }
    const onChangeGroupTag = (e:any) => {
        setGroupTag(e.currentTarget.value);
    }

    const onChangeMemberCount = (e:any)=> {
        const value = e.currentTarget.value;
        if(!utils.str.isNullOrEmpty(value) && /\d+/.test(value) === false){
            return;
        }
        setMaxCount(value);
    }

    const onSubmit = ()=> {
        ChatService.createNewGroup({
            adminId:UserHelper.getCachedUserInfo().userid||"",
            groupName:groupName,
            groupTag:groupTag,
            groupDesc:groupDesc,
            memberMaxNumber:maxCount||200,
            isPublic:isPublic
        }).then((result)=>{
            toast("successfully create group!",{autoClose:500});
            navigate("/chat/group") 
        }).catch((err)=>{
            PopupDialog.showBsError(err);
        })
    }

    return (<Container 
            id="addOrEditChatGroup"
            className="d-flex flex-column"
            fluid>
                <FormGroup as={Row}>
                    <Form.Label as={Col} sm={3} className="text-end">Group Name:</Form.Label>
                    <Col sm={7}>
                        <Form.Control id="groupname" type="input" onChange={onChangeGroupName}></Form.Control>
                    </Col>
                </FormGroup>
                <Container className="separator"/>
                <FormGroup as={Row}>
                    <Form.Label as={Col} sm={3} className="text-end">Group Tag:</Form.Label>
                    <Col sm={7}>
                        <Form.Control id="grouptag" type="input" onChange={onChangeGroupTag}></Form.Control>
                    </Col>
                </FormGroup>
                <Container className="separator"/>
                <FormGroup as={Row}>
                    <Form.Label as={Col} sm={3} className="text-end">Group Description:</Form.Label>
                    <Col sm={7}>
                        <Form.Control id="groupdesc" type="input" onChange={onChangeGroupDesc}></Form.Control>
                    </Col>
                </FormGroup>
                <Container className="separator"/>
                <FormGroup as={Row}>
                    <Form.Label as={Col} sm={3} className="text-end">Maximum Member Count:</Form.Label>
                    <Col sm={7}>
                        <Form.Control id="maxmumbercount" 
                        type="number" 
                        defaultValue={100} min={10} max={200} 
                        step={10}
                        value={maxCount} onChange={onChangeMemberCount}></Form.Control>
                    </Col>
                </FormGroup>
                <Container className="separator"/>
                <FormGroup as={Row}>
                    <Form.Label as={Col} sm={3} className="text-end">Public to all:</Form.Label>
                    <Col sm={7}>
                        <Container className="d-flex flex-row">
                            <FormCheck 
                                name="public"
                                label="YES"
                                id="ispublicyes"
                                type="radio"
                                defaultChecked
                                onSelect={()=>{
                                    setIsPublic(true)
                                }}
                            />
                            <div className="ms-2"/>
                            <FormCheck 
                                name="public"
                                label="NO"
                                id="ispublicno"
                                type="radio"
                                onSelect={()=>{
                                    setIsPublic(false)
                                }}
                            />
                        </Container>
                    </Col>
                </FormGroup>
                <Button className="submitBtn" onClick={onSubmit}>Submit</Button>
        </Container>)
}

export default AddOrEditChatGroup;

